<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>固定表头</title>
    <link rel="stylesheet" href="../../css/fixed-table.css" />
    <style>
        h1{
            text-align: center;
            padding-top: 30px;
        }
        .fixed-table-box{
            width: 800px;
            margin: 50px auto;
        }
        .fixed-table_body-wraper{
            height: 260px;
        }
    </style>
</head>
<body>
    <h1>当表格横向内容不会过多，但纵向内容多时可以使用固定表头</h1>
    <div class="fixed-table-box head-fixed">
        <!-- 表头 start -->
        <div class="fixed-table_header-wraper">
            <table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0">
                <thead>
                    <tr>
                        <th><div class="table-cell">日期</div></th>
                        <th><div class="table-cell">姓名</div></th>
                        <th><div class="table-cell">地址</div></th>
                    </tr>
                </thead>
            </table>
        </div>
        <!-- 表头 end -->
        <!-- 表格内容 start -->
        <div class="fixed-table_body-wraper">
            <table class="fixed-table_body" cellspacing="0" cellpadding="0" border="0">
                <thead>
                    <tr>
                        <td><div class="table-cell"> 2016-05-03</div></td>
                        <td><div class="table-cell">王小虎</div></td>
                        <td><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>
                    </tr>
                     <tr>
                        <td><div class="table-cell"> 2016-05-03</div></td>
                        <td><div class="table-cell">王小虎</div></td>
                        <td><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>
                    </tr>
                     <tr>
                        <td><div class="table-cell"> 2016-05-03</div></td>
                        <td><div class="table-cell">王小虎</div></td>
                        <td><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>
                    </tr>
                     <tr>
                        <td><div class="table-cell"> 2016-05-03</div></td>
                        <td><div class="table-cell">王小虎</div></td>
                        <td><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>
                    </tr>
                     <tr>
                        <td><div class="table-cell"> 2016-05-03</div></td>
                        <td><div class="table-cell">王小虎</div></td>
                        <td><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>
                    </tr>
                     <tr>
                        <td><div class="table-cell"> 2016-05-03</div></td>
                        <td><div class="table-cell">王小虎</div></td>
                        <td><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>
                    </tr>
                     <tr>
                        <td><div class="table-cell"> 2016-05-03</div></td>
                        <td><div class="table-cell">王小虎</div></td>
                        <td><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>
                    </tr>
                </thead>
            </table>
        </div>
        <!-- 表格内容 end -->
    </div>
</body>
</html>